<template>
  <div class="order">
    <van-nav-bar
      left-arrow
      title="确认订单"
      left-text="返回"
      @click-left="$router.back()"
    />
    <div class="scroll">
      <header class="van-contact-card" @click="$router.push('/addressList')">
        <van-icon name="location-o" />
        <section>
          <h6>{{ address.linkMan }} {{ address.mobile }}</h6>
          <p>{{ address.cityStr }} {{ address.provinceStr }} {{ address.address }}</p>
        </section>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </header>
      <div class="title">商品列表</div>
      <ul>
          <li v-for="(item,index) in goods" :key="index">
              <img :src="item.url" alt="">
              <section>
                <p>
                  <span>{{item.name}}</span>
                  <span>￥{{item.price}}</span>
                </p>
                <p style="color:#999;">
                  <span>{{item.checkName.join('')}}</span>
                  <span>{{item.buyNum}}</span>
                </p>
              </section>
          </li>
      </ul>
      <div class="send">
         <span>配送方式</span>
         <span>快递</span>
      </div>
      <van-field v-model="remark" label="备注" placeholder="请输入备注信息" />
      <div class="money">
        <span>商品金额</span>
        <span>￥{{allPrice}}</span>
      </div>
    </div>
    <van-submit-bar :price="allPrice*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>
<script>
import { getAddress,createOrder } from "../../api/second/index.js";
import { ref, computed } from "vue";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  setup(props) {
    const { state,commit } = useStore();
    const { push } = useRouter();
    const address = ref({});
    const remark = ref(''); // 备注的信息
    const goods = computed(() => state.goodsList.filter(item => item.ischeck))
    const allPrice = computed(() => goods.value.reduce((pov,now) => pov + now.price*now.buyNum,0));
    getAddress({ token: localStorage.getItem("token") }).then((res) => {
      address.value = res.data;
    });

    const onSubmit = () => { // 创建订单的函数
      let arr = goods.value.map(item => {
        return {
          goodsId: item.id,
          number: item.buyNum,
          propertyChildIds: item.checkid,
          logisticsType: 0
        }
      })
      createOrder({token:localStorage.getItem('token'),goodsJsonStr:JSON.stringify(arr)}).then(res => {
        if (res.code == 0){
          commit('delect');
          push({name:'Payment',params:{price:res.data.amountReal,orderNumber: res.data.orderNumber}});
        }
      })
    }
    return {
      address,
      goods,
      remark,
      allPrice,
      onSubmit
    };
  },
};
</script>

<style lang="scss" scoped>
.order {
  height: 100%;
  background: #e9e9e9;
  .scroll {
    height: calc(100% - 46px);
    header {
      position: relative;
      display: flex;
      padding: 10px 25px;
      box-sizing: border-box;
      align-items: center;
      font-size: 14px;
      background: #fff;
      .van-icon-location-o {
        font-size: 20px;
        margin-right: 10px;
      }
      section {
        flex: 1;
        p {
          color: grey;
          margin-top: 15px;
        }
      }
    }
    .title {
      line-height: 40px;
      background: #fff;
      padding-left: 30px;
      font-size: 16px;
      margin: 10px 0 5px 0;
    }
    li{
     padding: 10px;
     box-sizing: border-box;
     display: flex;
     background: #fff;
     margin-bottom: 10px;
     img{
      width: 79px;
      height: 79px;
     }
     section{
       flex: 1;
       font-size: 13px;
       display: inline-flex;
       flex-wrap: wrap;
       padding: 15px 0;
       box-sizing: border-box;
       align-content: space-between;
       margin-left: 10px;
       p{
        width: 100%;
        display: flex;
        justify-content: space-between;
       }
     }
    }
    .send{
      font-size: 15px;
      height: 41px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      background: #fff;
      margin-top: 15px;
      align-items: center;
      border-bottom: 1px solid #ccc;
    }
    .money{
      height: 40px;
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      box-sizing: border-box;
      align-items: center;
      background: #fff;
      margin-top: 20px; 
    }
  }
}
</style>
